jQuery(document).ready(
		function() {

			// main page
			var header = $('<div></div>');
			header.attr('id', 'management_header');
			var body = $('<div></div>');
			body.attr('id', 'management_body');

			$("#content").append(header);
			$("#content").append(body);
			header.append("<h1>SMART TAXI MANAGEMENT</h1>");

			var viewMenu = $('<div></div>').attr('id', 'management_viewMenu');
			var viewBody = $('<div></div>').attr('id', 'management_viewBody');
			body.append(viewMenu, viewBody);

			// menu
			var viewMain = $('<div></div>').attr('id', 'menuMain').attr('class', 'menu1');
			var show = $('<div></div>').attr('id', 'show').attr('class', 'menu1');;
			viewMenu.append(viewMain, show);

			// add the HOME to menuMain
			var mainHome = $('<div></div>').attr('id', 'menu').attr(
					'class', 'mainHome');
			viewMain.append(mainHome);

			var mainLink = $('<div></div>').attr('id', 'mainLink').attr(
					'class', 'mainLink');
			mainHome.append(mainLink);

			var homeText = $('<span>HOME</span>');
			var homeImage = $('<i></i>').attr('class', 'homeImage');

			mainLink.append(homeImage, homeText);

			//add SHOW to show(one of three menus)

			var showMain = $('<div></div>').attr('id', 'menu').attr(
					'class', 'showMain');
			show.append(showMain);

			var showLink = $('<div></div>').attr('id', 'showLink').attr(
					'class', 'showLink');
			showMain.append(showLink);

			var showText = $('<span>SHOW</span>');
			var showImage = $('<i></i>').attr('class', 'showImage');

			showLink.append(showImage, showText);

			//add sub show menu
			var subShow = $('<div></div>').attr('id', 'subShow').attr(
					'class', 'subShow')
					
			var subShowMenus = [ "map", "sub2", "sub3" ];
			for(var sub in subShowMenus){
				var subMenu = $('<div></div>').attr('id', 'subMenu').attr(
						'class', subShowMenus[sub]);
				subShow.append(subMenu);
				var showText = $('<span>' + subShowMenus[sub].toUpperCase() + '</span>');
				subMenu.append(showText);
				
			}
			showMain.append(subShow);
			subShow.hide();
			//setting menu
//			var setMain = $('<div></div>').attr('id', 'menu').attr(
//					'class', 'setMain');
//			setting.append(setMain);
//
//			var setLink = $('<div></div>').attr('id', 'setLink').attr(
//					'class', 'setLink');
//			setMain.append(setLink);
//
//			var setText = $('<span>SETTING</span>');
//			var setImage = $('<i></i>').attr('class', 'setImage');
//
//			setLink.append(setImage, setText);
			// body
			
//			$('#showLink').trigger('click');
			
			
			//init the subshow in the status hide
			$(".subShow").hide('slow');
			
			$('.menu1').click(function(){
				$('.menu1').removeClass('highlight');
				$(this).addClass('highlight');
				if($(this).children().is('.showMain') == true && $(".subShow").is(":visible") == false) {
					$(".subShow").slideToggle('normal');

					var showBar = $('<div></div>').attr('id', 'showBar').attr(
							'class', 'showBar');
					var showData = $('<div></div>').attr('id', 'showData').attr(
							'class', 'showData');
					var showTable = $('<div></div>').attr('id', 'showTable').attr(
							'class', 'showTable');
					$("#management_viewBody").append(showBar, showData, showTable);
					$('.showTable').hide();
					//$("#management_viewBody").sortable();
					//$("#management_viewBody").disableSelection();
				} else if($(this).children().is('.showMain') == false){
					$(".subShow").hide('slow');
					$("#management_viewBody").empty();
				}
			});

});